<style>
.form-item {
  margin-left: 10px;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 5px;
  margin-top: 5px;
}

.topbutton {
  margin-top: 5px;
}

.dictClass {
  width: 80%;
  height: 80%;
}
</style>

<template>
  <div>
    <!-- <el-row>
  <el-button plain>新增</el-button>
</el-row> -->
    <el-form :inline="true">
      <el-form-item label="关键字" class="form-item">
        <el-input v-model="searchMap.username" placeholder="字典类型名称"/>
      </el-form-item>

      <el-button type="primary" class="topbutton" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">新增</el-button>
    </el-form>
    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed prop="name" label="字典类型名称" width="150" align="center"/>
      <el-table-column prop="code" label="字典类型编码" min-width="100" align="center"/>
      <el-table-column prop="status" label="状态" width="150" align="center" :formatter="statusFormat"/>
      <el-table-column prop="remark" label="描述" width="200" align="center"/>

      <el-table-column label="操作" min-width="150" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleDict(scope.row)">字典数据</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="total"
      :page-sizes="[10, 20, 50]"
      :page-size="10"
      @size-change="sizeData"
      @current-change="pageData"
    />

    <!-- 字典分类修改 -->
    <el-dialog title="新增/编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="20%">
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典名称">
              <el-input v-model="pojo.name"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典对应字段">
              <el-input v-model="pojo.code"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-radio-group v-model="pojo.status">
                <el-radio :label="false">正常</el-radio>
                <el-radio :label="true">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="描述">
              <el-input v-model="pojo.remark"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="handleSave()">保存</el-button>
          <el-button @click="dialogFormVisible = false">关闭</el-button>
        </el-row>
      </el-form>
    </el-dialog>

    <el-dialog :title="dictTitle" :visible.sync="dialogDictVisible" custom-class="dictClass">
      <el-table :data="dictInfolist" border style="width: 100%">
        <el-table-column fixed prop="name" label="字典名称" width="150" align="center"/>
        <el-table-column prop="value" label="字典值" min-width="100" align="center"/>
        <!-- <el-table-column prop="status" label="状态" width="150" align="center" :formatter="statusFormat" /> -->
        <el-table-column label="状态" width="150" align="center">
          <template slot-scope="scope">
            <!-- {{ statusFormat(scope.row.status) }} -->
            <el-button
              size="small"
              :type="scope.row.status == false ? 'primary' : 'danger'">
              {{ scope.row.status == false ? '启用' : '禁用' }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="sequence" label="显示顺序" width="200" align="center"/>

        <el-table-column label="操作" min-width="150" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="DictInfoEdit(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="DictInfoDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :total="dicttotal"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        @size-change="sizeData"
        @current-change="pageData"
      />
    </el-dialog>

    <!-- 字典Info修改 -->
    <el-dialog title="字典Info新增/编辑" :visible.sync="dialogInfoVisible">
      <el-form label-width="20%">
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典名称">
              <el-input v-model="pojoInfo.name"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典值">
              <el-input v-model="pojoInfo.value"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-radio-group v-model="pojoInfo.status">
                <el-radio :label="false">正常</el-radio>
                <el-radio :label="true">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="描述">
              <el-input v-model="pojoInfo.remark"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="dictInfoSave()">保存</el-button>
          <el-button @click="dialogInfoVisible = false">关闭</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as dict from '@/api/sys/dict';
import * as dictInfo from '@/api/sys/dictInfo';

export default {
  data() {
    return {
      list: [],
      total: 0,
      searchMap: {
        curPage: 1,
        pageSize: 10
      },
      dialogFormVisible: false,
      dialogDictVisible: false,
      id: '', // 主键，新增修改的主键
      pojo: {},
      imageUrl: '',
      dictInfolist: [], //具体字典数据
      dicttotal: 0,
      dictsearchMap: {
        curPage: 1,
        pageSize: 10,
        catId: 0
      },
      dictTitle: '',
      pojoInfo: {},
      infoId: '',
      dialogInfoVisible: false
      // headers: {
      //   token: getToken() // 给图片赋值token
      // }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleDict(row) {
      this.dialogDictVisible = true;
      this.dictsearchMap.catId = row.id;
      this.dictTitle = row.name + ':数据字典';
      dictInfo.page(this.dictsearchMap).then((res) => {
        this.dictInfolist = res.data.records;
        this.dicttotal = res.data.total;
        console.log(this.dictInfolist);
      });
    },
    fetchData() {
      dict.page(this.searchMap).then((res) => {
        console.log(res);
        this.list = res.data.records;
        this.total = res.data.total;
      });
    },
    statusFormat(row, column) {
      const date = row[column.property];
      if (!date) {
        //0为启用，1为停用
        return '启用';
      } else {
        return '停用';
      }
    },
    sizeData(limit) {
      console.log(limit);
      this.searchMap.pageSize = limit;
      this.fetchData();
    },
    pageData(page) {
      this.searchMap.curPage = page;
      this.fetchData();
    },
    // 新增和修改用同一个函数，新增不传 ID ,修改传ID过来
    handleEdit(id) {
      console.log(id);
      this.dialogFormVisible = true;
      if (id !== '') {
        dict.findById(id).then((res) => {
          console.log(res);
          this.pojo = res.data;
          this.id = id;
        });
      } else {
        this.id = '';
        this.pojo = {};
      }
    },
    handleDelete(id) {
      this.$confirm('此操作删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var ids = [];
          ids.push(id);
          console.log(ids);
          deleteByIds(ids).then((res) => {
            this.$message({
              type: res.code === 200 ? 'success' : 'error',
              message: res.msg
            });
            if (res.code === 200) {
              this.fetchData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 保存数据的方法
    handleSave() {
      console.log(this.pojo);
      // 向后端发送 数据
      dict.update(this.id, this.pojo).then((res) => {
        // 修改 或者新增成功
        this.$message({
          message: res.msg,
          type: res.code === 200 ? 'success' : 'error'
        });
        if (res.code === 200) {
          this.fetchData();
        }
        this.dialogFormVisible = false;
      });
    },
    // 新增和修改字典Info的数据
    DictInfoEdit(id) {
      this.dialogInfoVisible = true;
      if (id !== '') {
        dictInfo.findById(id).then((res) => {
          console.log(res);
          this.pojoInfo = res.data;
          this.infoId = id;
        });
      } else {
        this.infoId = '';
        this.pojoInfo = {};
      }
    },
    dictInfoSave() {
      console.log(this.pojoInfo);
      dictInfo.update(this.infoId, this.pojoInfo).then((res) => {
        // 修改 或者新增成功
        this.$message({
          message: res.msg,
          type: res.code === 200 ? 'success' : 'error'
        });
        if (res.code === 200) {
          dictInfo.page(this.dictsearchMap).then((res1) => {
            this.dictInfolist = res1.data.records;
            this.dicttotal = res1.data.total;
            // console.log(this.dictInfolist);
          });
        }
        this.dialogInfoVisible = false;
      });
    }
  }
};
</script>
